<script setup lang="ts">
withDefaults(defineProps<{
  title?: string
}>(), {
  title: '测试'
})

</script>

<template>
  <div class="top">
    <div>{{ title }}</div>
    <div class="action_box">
      <el-icon>
        <i-ep-phone/>
      </el-icon>
      <el-icon>
        <i-ep-videoCamera/>
      </el-icon>
      <el-icon>
        <i-ep-monitor/>
      </el-icon>
      <el-icon>
        <i-ep-message/>
      </el-icon>
    </div>
  </div>
</template>

<style scoped lang="scss">
.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(27, 27, 27);
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  justify-content: space-between;
  background-color: rgb(17, 17, 17);
  z-index: 999;

  & div {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .action_box {
    font-size: 25px;

    :deep(.el-icon) {
      margin: 0 5px;

      &:hover {
        color: rgb(0, 102, 204);
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>